<template>
  <div class="app">
    <div class="logo-box"></div>
    <div class="login-box">
      <div class="login-input">
        <span class="title">欢迎登录</span>
        <span class="desc">AEO实训认证用户登录</span>
        <el-form
          :model="dataForm"
          :rules="dataRule"
          size="medium"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
        >
          <el-col :span="24">
            <el-form-item prop="mobilePhone" label="用户名" style="margin-bottom: 12px">
              <el-input v-model="dataForm.mobilePhone" style="width: 100%" placeholder="帐号">
                <img
                  slot="prefix"
                  style="padding-top: 5px"
                  src="@/assets/img/login_username.png"
                  alt=""
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="password" label="密码">
              <el-input
                v-model="dataForm.password"
                style="width: 100%"
                type="password"
                placeholder="密码"
                show-password
              >
                <img
                  slot="prefix"
                  style="padding-top: 5px"
                  src="@/assets/img/login_password.png"
                  alt=""
                />
              </el-input>
            </el-form-item>
          </el-col>
          <el-button
            class="login-btn-submit"
            type="primary"
            style="width: 48%; margin-top: 10px; margin-right: 5px"
            @click="dataFormSubmit()"
          >
            登录
          </el-button>
          <el-button
            class="login-btn-submit"
            type="info"
            style="width: 48%; margin-top: 10px"
            @click="back()"
          >
            返回上级
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { SystemController } from '@/api';
import { mapMutations } from 'vuex';
import projectConfig from '@/core/config';
import { encrypt, setToken } from '@/utils';

export default {
  data() {
    return {
      bkImg: require('@/assets/img/login_icon.png'),
      dataForm: {
        mobilePhone: '',
        password: ''
      },
      dataRule: {
        mobilePhone: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      projectName: projectConfig.projectName
    };
  },
  methods: {
    back() {
      this.$router.replace({ name: 'courseLogin' });
    },
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.login();
        }
      });
    },
    login() {
      let params = {
        loginName: this.dataForm.mobilePhone,
        password: encrypt(this.dataForm.password),
        role: 1
      };
      setToken(null);
      SystemController.login(this, params, null, { showMask: false })
        .then(data => {
          this.setMenuList(data.data.menuList);
          delete data.data.menuList;

          this.setUserInfo(data.data);
          setToken(data.data.tokenData);
          this.setCurrentMenuId(null);
          this.$router.replace({ name: 'course', query: { personnelType: 2 } });
        })
        .catch(e => {});
    },
    ...mapMutations(['setUserInfo', 'setMenuList', 'setCurrentMenuId'])
  },
  mounted() {
    this.setMenuList([]);
    this.setUserInfo({});
    setToken();
  }
};
</script>
<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  background-image: url('~@/assets/img/bg.png');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.app .logo-box {
  position: absolute;
  left: 5.5vw;
  top: 6.66vh;
  display: flex;
  align-items: center;
  font-size: 28px;
  color: #333333;
  font-weight: bold;
}

.app .logo-box img {
  margin-right: 11px;
}

.app .login-box {
  display: flex;
  align-items: flex-start;
  border-radius: 3px;
  height: 408px;
}

.app .login-box .login-input {
  width: 570px;
  border-radius: 16px;
  background-image: url('~@/assets/img/loginbox.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  padding: 46px 40px;
  box-shadow: 0px 2px 20px 1px rgba(79, 79, 79, 0.1);
}

.app .login-box .login-input .title {
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}

.app .login-box .login-input .desc {
  font-size: 14px;
  margin-bottom: 24px;
  color: #ffffff;
}

.app .login-box .img-box {
  margin-right: 163px;
  position: relative;
}

.app .login-box .img-box .img-title {
  position: absolute;
  width: 375px;
  top: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.app .login-box .el-input--prefix .el-input__inner {
  padding-left: 42px;
}

.app .login-box .el-input__prefix {
  display: flex;
  align-items: center;
  margin-left: 4px;
  padding-top: 10px !important;
}

.app .el-form-item__label {
  color: #333333;
}

.app .el-input__inner {
  height: 40px !important;
}
</style>
